<template>
  <v-page disable-scroll footer-background="white">
    <template #header>
      <v-navbar title="商品分类" :back="false" :border="false" />
    </template>
    <template #default>
      <view class="page-container">
        <scroll-view scroll-y class="first-category">
          <template v-for="category in categoryList" :key="category.id">
            <view
              v-if="category.children?.some((item) => !!item.children?.length)"
              class="category-item"
              :class="{ active: category.id === selectedCategory?.id }"
              @click="selectCategory(category)"
            >
              {{ category.name }}
            </view>
          </template>
        </scroll-view>
        <scroll-view scroll-y class="category-list">
          <template v-if="selectedCategory?.children?.length">
            <view
              v-for="second in selectedCategory.children"
              :key="second.id"
              class="second-category"
            >
              <view class="header">
                <view class="header-name">
                  {{ second.name }}
                </view>
                <view
                  v-if="
                    second.children &&
                      second.children.length > 6 &&
                      !expandedList.includes(second.id)
                  "
                  class="header-more-button"
                  @click="expandHandle(second.id)"
                >
                  <view class="button-text">
                    更多
                  </view>
                  <wd-icon name="arrow-right" size="16rpx" color="#999999" />
                </view>
              </view>
              <view class="container">
                <template v-if="expandedList.includes(second.id)">
                  <view
                    v-for="third in second?.children"
                    :key="third.id"
                    class="category-item"
                    @click="navigateToSearch(second, third)"
                  >
                    <v-image
                      height="143rpx"
                      width="143rpx"
                      border-radius="16rpx"
                      :src="third.image"
                      mode="aspectFill"
                    />
                    <view class="category-name">
                      {{ third.name }}
                    </view>
                  </view>
                </template>
                <template v-else>
                  <view
                    v-for="third in second?.children?.slice?.(0, 6)"
                    :key="third.id"
                    class="category-item"
                    @click="navigateToSearch(second, third)"
                  >
                    <v-image
                      height="143rpx"
                      width="143rpx"
                      border-radius="16rpx"
                      :src="third.image"
                      mode="aspectFill"
                    />
                    <view class="category-name">
                      {{ third.name }}
                    </view>
                  </view>
                </template>
              </view>
            </view>
          </template>
        </scroll-view>
      </view>
    </template>
  </v-page>
</template>

<script setup lang="ts">
const categoryList = ref<CategoryVO[]>();
const getCategory = async () => {
  const response = await $api.getCategoryAll();
  switch (response.__error) {
    case undefined:
      categoryList.value = response.data.list;
      break;
  }

  if (categoryList.value) {
    for (let i = 0; i < categoryList.value.length; i += 1) {
      const category = categoryList.value[i];
      if (!category.children?.some((item) => !!item.children?.length)) continue;
      selectCategory(category);
      break;
    }
  }
};
const loading = ref(true);
onMounted(async () => {
  loading.value = true;
  await getCategory();
  loading.value = false;
});

const selectedCategory = ref<CategoryVO>();
const selectCategory = (category: CategoryVO) => {
  expandedList.value = [];
  selectedCategory.value = category;
};

const expandedList = ref<string[]>([]);
const expandHandle = (id: string) => {
  expandedList.value.push(id);
};

const navigateToSearch = (second: CategoryVO, third: CategoryVO) => {
  const pageStore = $store.page();
  pageStore.setParameters({
    category: [selectedCategory.value, second, third]
  });
  uni.navigateTo({ url: '/pages/search/search-page' });
};
</script>

<style lang="scss" scoped>
.page-container {
  display: flex;
  align-items: stretch;
  height: 100%;
}
.first-category {
  width: 176rpx;
  background-color: #f5f6fa;
  .category-item {
    position: relative;
    padding: 0 10rpx 0 24rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    &.active {
      background-color: #ffffff;
      color: #ff2f3b;
      &::before {
        content: '';
        position: absolute;
        left: 16rpx;
        top: 50%;
        transform: translateY(-50%);
        height: 20rpx;
        width: 8rpx;
        background-color: #ff2f3b;
        border-radius: 4rpx;
      }
    }
  }
}
.category-list {
  flex: 1;
  min-width: 0;
  padding: 0 26rpx;
  .second-category {
    margin-bottom: 20rpx;
    .header {
      padding: 10rpx 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .header-name {
        font-weight: bold;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-break: break-all;
        text-align: center;
      }
      .header-more-button {
        display: flex;
        align-items: center;
        gap: 10rpx;
        .button-text {
          color: #999999;
          font-size: 24rpx;
        }
      }
    }
    .container {
      display: flex;
      flex-wrap: wrap;
      gap: 16rpx 30rpx;
      .category-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 150rpx;
        .category-name {
          margin-top: 16rpx;
          font-size: 24rpx;
          color: #666666;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          word-break: break-all;
          text-align: center;
          max-width: 150rpx;
        }
      }
    }
  }
}
</style>
